<script lang="ts" setup></script>

<template>
  <view class="sk-container">
    <view class="index index">
      <view is="components/header/myHeader" class="header header">
        <view class="my-header myHeader--my-header" style="padding-top: 30px">
          <view class="left myHeader--left">
            <view
              class="iconfont myHeader--iconfont icon-fanhui myHeader--icon-fanhui sk-pseudo sk-pseudo-circle"
            ></view>
            <view
              class="iconfont myHeader--iconfont icon-shouye myHeader--icon-shouye home myHeader--home sk-pseudo sk-pseudo-circle"
            ></view>
          </view>
          <view class="text myHeader--text sk-transparent sk-text-14-2857-693 sk-text">歌单</view>
        </view>
      </view>
      <scroll-view :scroll-y="true">
        <view class="toplist-list toplist-list">
          <view class="toplist-list-item toplist-list-item">
            <view class="toplist-cover-wrap toplist-cover-wrap">
              <image class="toplist-cover sk-image"></image>
              <text class="sk-transparent sk-text-14-2857-437 sk-text">刚刚更新</text>
            </view>
            <view class="toplist-item-text toplist-item-text">
              <view>
                <text class="sk-transparent sk-text-14-2857-12 sk-text"
                  >1. Chrome Hea... - GALI</text
                >
              </view>
              <view>
                <text class="sk-transparent sk-text-14-2857-244 sk-text"
                  >2. 稍息立定 - Melo/马思唯</text
                >
              </view>
              <view>
                <text class="sk-transparent sk-text-14-2857-118 sk-text">3. 5:20AM - 刀酱</text>
              </view>
            </view>
          </view>
          <view class="toplist-list-item toplist-list-item">
            <view class="toplist-cover-wrap toplist-cover-wrap">
              <image class="toplist-cover sk-image"></image>
              <text class="sk-transparent sk-text-14-2857-978 sk-text">刚刚更新</text>
            </view>
            <view class="toplist-item-text toplist-item-text">
              <view>
                <text class="sk-transparent sk-text-14-2857-942 sk-text">1. 瘦子 - 丁世光</text>
              </view>
              <view>
                <text class="sk-transparent sk-text-14-2857-945 sk-text">2. 你 - 很美味</text>
              </view>
              <view>
                <text class="sk-transparent sk-text-14-2857-423 sk-text"
                  >3. 你（新版） - 林依晨</text
                >
              </view>
            </view>
          </view>
          <view class="toplist-list-item toplist-list-item">
            <view class="toplist-cover-wrap toplist-cover-wrap">
              <image class="toplist-cover sk-image"></image>
              <text class="sk-transparent sk-text-14-2857-486 sk-text">每周四更新</text>
            </view>
            <view class="toplist-item-text toplist-item-text">
              <view>
                <text class="sk-transparent sk-text-14-2857-576 sk-text">1. 宇宙信封 - 蒲熠星</text>
              </view>
              <view>
                <text class="sk-transparent sk-text-14-2857-974 sk-text"
                  >2. 红鸾天喜 - 世界之外</text
                >
              </view>
              <view>
                <text class="sk-transparent sk-text-14-2857-237 sk-text">3. 别来无恙 - 陈亦洺</text>
              </view>
            </view>
          </view>
          <view class="toplist-list-item toplist-list-item">
            <view class="toplist-cover-wrap toplist-cover-wrap">
              <image class="toplist-cover sk-image"></image>
              <text class="sk-transparent sk-text-14-2857-284 sk-text">更新16首</text>
            </view>
            <view class="toplist-item-text toplist-item-text">
              <view>
                <text class="sk-transparent sk-text-14-2857-766 sk-text"
                  >1. 如果爱忘了 (liv... - 汪苏泷/单依纯</text
                >
              </view>
              <view>
                <text class="sk-transparent sk-text-14-2857-86 sk-text"
                  >2. 若月亮没来 (若是月... - 王宇宙Leto/乔浚丞</text
                >
              </view>
              <view>
                <text class="sk-transparent sk-text-14-2857-964 sk-text"
                  >3. 紫荆花盛开 - 李荣浩/梁咏琪</text
                >
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.sk-transparent {
  color: transparent !important;
}
.sk-text-14-2857-693 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 40.5797rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-14-2857-437 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 30.4348rpx;
  position: absolute !important;
}
.sk-text-14-2857-12 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-244 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-118 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-978 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 30.4348rpx;
  position: absolute !important;
}
.sk-text-14-2857-942 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-945 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-423 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-486 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 30.4348rpx;
  position: absolute !important;
}
.sk-text-14-2857-576 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-974 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-237 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-284 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 30.4348rpx;
  position: absolute !important;
}
.sk-text-14-2857-766 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-86 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-text-14-2857-964 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 35.5072rpx;
  position: relative !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
